<template>
    <el-card shadow="never" style="max-height: 700px; overflow: auto">
        <el-form ref="form" :model="form" :rules="rules" label-width="90px" :disabled="disabled" @submit.native.prevent>
            <el-form-item label="brand:" prop="brand">
                <el-input v-model="form.brand" disabled />
            </el-form-item>
            <el-form-item label="开始时间:" prop="start_time">
                <el-date-picker
                    v-model="form.start_time"
                    align="right"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间:" prop="end_time">
                <el-date-picker
                    v-model="form.end_time"
                    align="right"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="submitForm">确认 </el-button>
                <el-button type="warning" @click="cancel">取消 </el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
export default {
    name: 'edittf_applyForm',
    props: {
        findFormData: {
            type: Object,
            default: {},
        },
        editFormParams: {
            type: Object,
            default: {},
        },
        // 表单是否禁用
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            // 编辑表单验证规则
            rules: {},
            form: {},
            images: [
                
            ],
            productvariants: [],
            attributes: [
                
            ],
            classification:[
                {
                    'title':'Bars',
                },{
                    'title':'内裤',
                },
            ],
            tags: [],
            inputVisible: false,
            inputValue: '',
        }
    },
    watch: {
        findFormData: {
            handler(nval) {
                if (JSON.stringify(nval) != '{}') {
                    this.$nextTick(() => {
                        this.form = nval
                    })
                }
            },
            immediate: true,
            deep: false,
        },
    },
    methods: {
        // 取消按钮
        cancel() {
            this.$emit('edittf_applyFormCancel')
        },

        submitForm() {
            this.$refs['form'].validate((valid, obj) => {
                if (valid) {
                    this.form.start_time = Date.parse(this.form.start_time);
                    this.form.end_time = Date.parse(this.form.end_time);
                    this.$emit('submittf_applyForm', this.form)
                }
            })
        },

        // 表单重置
        reset() {
            this.resetForm('form')
        },
        showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
            this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
            if(this.tags == ''){
                this.tags = []
            }
            this.tags.push(inputValue);
            this.form.tags = this.tags
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleClose(tag) {
            this.tags.splice(this.tags.indexOf(tag), 1);
            this.form.tags = this.tags
        },
        change(val) {
            this.color_change = val;
        },
    },
}
</script>
<style>
    .image {
        width: 100%;
        display: block;
        /* height: 100%; */
    }
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
    h3{
        margin:5px 0;
        padding:5px 0;
    }
</style>